{"componentChunkName":"component---src-templates-post-tsx","path":"/React-study_3/","result":{"data":{"markdownRemark":{"html":"<p>JSX 문법에서 컴포넌트를 작성할 때 컴포넌트에도 속성을 지정할 수 있는데요. 리액트에서 이렇게 컴포넌트에 지정한 속성들을 Props라고 부릅니다.</p>\n<p>Props는 Properties의 약자인데요. 컴포넌트에 속성을 지정해주면 각 속성이 하나의 객체로 모여서 컴포넌트를 정의한 함수의 첫 번째 파라미터로 전달됩니다.</p>\n<p>App.js</p>\n<p>import Dice from './Dice';</p>\n<p>function App() {\nreturn (</p>\n<div>\n<Dice color=\"blue\" />\n</div>\n);\n}\n<p>export default App;\nDice.js</p>\n<p>import diceBlue01 from './assets/dice-blue-1.svg';</p>\n<p>function Dice(props) {\nconsole.log(props)\nreturn <img src={diceBlue01} alt=\"주사위\" />;\n}</p>\n<p>export default Dice;\n위 코드들 처럼 App 함수에서 사용하는 Dice 컴포넌트에 color라는 속성을 blue로 지정해주고, Dice 함수 내부에서 props라는 파라미터를 하나 만들어 출력해보면 브라우저 콘솔에는 다음과 같은 출력 결과가 나타나게 됩니다.</p>\n<p>{ color: \"blue\" }\n그래서 컴포넌트를 활용할 때 속성값을 다양하게 전달하고 이 props 값을 활용하면, 똑같은 컴포넌트라도 전달된 속성값에 따라 서로 다른 모습을 그려낼 수도 있게 됩니다.</p>\n<p>App.js</p>\n<p>import Dice from './Dice';</p>\n<p>function App() {\nreturn (</p>\n<div>\n<Dice color=\"red\" num={2} />\n</div>\n);\n}\n<p>export default App;\nDice.js</p>\n<p>import diceBlue01 from './assets/dice-blue-1.svg';\nimport diceBlue02 from './assets/dice-blue-2.svg';\n// ...\nimport diceRed01 from './assets/dice-red-1.svg';\nimport diceRed02 from './assets/dice-red-2.svg';\n// ...</p>\n<p>const DICE_IMAGES = {\nblue: [diceBlue01, diceBlue02],\nred: [diceRed01, diceRed02],\n};</p>\n<p>function Dice(props) {\nconst src = DICE_IMAGES[props.color][props.num - 1];\nconst alt = <code class=\"language-text\">${props.color} ${props.num}</code>;\nreturn <img src={src} alt={alt} />;\n}</p>\n<p>export default Dice;\n참고로, 이렇게 props가 객체 형태를 띠고 있으니 Destructuring 문법을 활용해서 조금 더 간결하게 코드를 작성할 수도 있겠죠?</p>\n<p>import diceBlue01 from './assets/dice-blue-1.svg';\nimport diceBlue02 from './assets/dice-blue-2.svg';\n// ...\nimport diceRed01 from './assets/dice-red-1.svg';\nimport diceRed02 from './assets/dice-red-2.svg';\n// ...</p>\n<p>const DICE_IMAGES = {\nblue: [diceBlue01, diceBlue02],\nred: [diceRed01, diceRed02],\n};</p>\n<p>function Dice({ color = 'blue', num = 1 }) {\nconst src = DICE_IMAGES[color][num - 1];\nconst alt = <code class=\"language-text\">${color} ${num}</code>;\nreturn <img src={src} alt={alt} />;\n}</p>\n<p>export default Dice;\nChildren\nprops에는 children이라는 조금 특별한 프로퍼티(prop, 프롭)가 있습니다.</p>\n<p>JSX 문법으로 컴포넌트를 작성할 때 컴포넌트를 단일 태그가 아니라 여는 태그와 닫는 태그의 형태로 작성하면, 그 안에 작성된 코드가 바로 이 children 값에 담기게 됩니다.</p>\n<p>Button.js</p>\n<p>function Button({ children }) {\nreturn <button>{children}</button>;\n}</p>\n<p>export default Button;\nApp.js</p>\n<p>import Button from './Button';\nimport Dice from './Dice';</p>\n<p>function App() {\nreturn (</p>\n<div>\n<div>\n<Button>던지기</Button>\n<Button>처음부터</Button>\n</div>\n<Dice color=\"red\" num={2} />\n</div>\n);\n}\n<p>export default App;\n그래서 JSX 문법으로 컴포넌트를 작성할 때 어떤 정보를 전달할 때는 일반적인 props의 속성값을 주로 활용하고, 화면에 보여질 모습을 조금 더 직관적인 코드로 작성하고자 할 때 children 값을 활용할 수가 있습니다.</p>\n<p>참고로 이 children을 활용하면 단순히 텍스트만 작성하는 걸 넘어서 컴포넌트 안에 컴포넌트를 작성할 수도 있고, 컴포넌트 안에 복잡한 태그들을 더 작성할 수도 있다.</p>","excerpt":"JSX 문법에서 컴포넌트를 작성할 때 컴포넌트에도 속성을 지정할 수 있는데요. 리액트에서 이렇게 컴포넌트에 지정한 속성들을 Props라고 부릅니다. Props는 Properties의 약자인데요. 컴포넌트에 속성을 지정해주면 각 속성이 하나의 객체로 …","tableOfContents":"","fields":{"slug":"/React-study_3/"},"frontmatter":{"title":"React Props 문법","date":"Aug 22, 2021","tags":["react"],"keywords":["Dev.seungwon Jang","seungwon Jang"],"update":"Aug 22, 2021"}}},"pageContext":{"slug":"/React-study_3/","series":[{"slug":"/React-study_1/","title":"React JSX 문법","num":1},{"slug":"/React-study_2/","title":"React commponent 문법","num":2},{"slug":"/React-study_3/","title":"React Props 문법","num":3},{"slug":"/React-study_4/","title":"React state 정리하기","num":4},{"slug":"/React-study_5/","title":"React 디자인 적용하는 방법과 팁","num":5},{"slug":"/React-study_6/","title":"React 배포하기","num":6}],"lastmod":"2021-08-22"}},"staticQueryHashes":["2027115977","694178885"]}